<template>
	<el-dialog v-model="state.dialog" title="发货" width="40%" :before-close="handleClose">
		<el-descriptions title="收货信息" :column="1" border>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon> <ele-User /> </el-icon>收货人
					</div>
				</template>
				{{ state.orderLogistics.addresseeName }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon> <ele-Iphone /> </el-icon>联系电话
					</div>
				</template>
				{{ state.orderLogistics.telephone }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon> <ele-Location /> </el-icon> 收货地址
					</div>
				</template>
				{{ state.orderLogistics.detailAddress }}
			</el-descriptions-item>
		</el-descriptions>
		<el-card class="box-card margin-top">
			<template #header>
				<div class="card-header">
					<span>物流信息</span>
				</div>
			</template>
			<el-form ref="refForm" :model="state.form" :rules="state.rules">
				<el-form-item label="快递公司" prop="logistics">
					<el-select value-key="code" v-model="state.form.logistics" placeholder="请选择快递公司" style="width: 100%">
						<el-option v-for="item in state.logisticscompanys" :key="item" :label="item.name" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item label="物流单号" prop="logisticsNo">
					<el-input v-model="state.form.logisticsNo" />
				</el-form-item>
			</el-form>
		</el-card>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dialog = false">关闭</el-button>
				<el-button type="primary" @click="submitForm(refForm)" :loading="loading">发货</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { getById } from '/@/api/order/orderLogistics';
import { deliverOrder } from '/@/api/order/orderinfo';
import { getList as getLogisticsList } from '/@/api/shop/logisticscompany';
import { FormInstance, ElMessage } from 'element-plus';
interface LogisticsCompany {
	code: string;
	name: string;
}
interface DataState {
	form: {
		id: string;
		logistics: any;
		logisticsNo: string;
		orderLogisticsId: string;
		logisticsCode: string;
		logisticsName: string;
	};
	orderLogistics: {
		id: string;
		addresseeName: string;
		telephone: string;
		detailAddress: string;
	};
	dialog: boolean;
	orderId: string;
	rules: any;
	logisticscompanys: Array<LogisticsCompany>;
}
const emit = defineEmits(['handleSuccess']);
const state = reactive<DataState>({
	form: {
		id: '',
		logistics: {},
		logisticsNo: '',
		orderLogisticsId: '',
		logisticsCode: '',
		logisticsName: '',
	},
	orderLogistics: {
		id: '',
		addresseeName: '',
		telephone: '',
		detailAddress: '',
	},
	dialog: false,
	orderId: '',
	rules: {
		logistics: [
			{
				required: true,
				message: '请选择物流公司',
				trigger: 'change',
			},
		],
		logisticsNo: [
			{
				required: true,
				message: '请输入物流单号',
				trigger: 'change',
			},
		],
	},
	logisticscompanys: [],
});
const refForm = ref();
const loading = ref(false);
const initPage = (orderId: string, orderLogisticsId: string) => {
	state.dialog = true;
	state.orderId = orderId;
	getById(orderLogisticsId).then((response) => {
		state.orderLogistics = response.data.data;
	});

	getLogisticsList({ status: '0' }).then((response) => {
		state.logisticscompanys = response.data.data;
	});
};

/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			state.form.id = state.orderId;
			state.form.orderLogisticsId = state.orderLogistics.id;
			state.form.logisticsCode = state.form.logistics.code;
			state.form.logisticsName = state.form.logistics.name;
			deliverOrder(state.form)
				.then((response) => {
					ElMessage.success('发货成功');
					loading.value = false;
					state.dialog = false;
					emit('handleSuccess');
				})
				.catch(() => {
					loading.value = false;
				});
		}
	});
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.id = '';
	loading.value = false;
	state.dialog = false;
	formEl.resetFields();
};
const handleClose = () => {
	resetForm(refForm.value);
};
defineExpose({
	initPage,
});
</script>
<style scoped>
.margin-top {
	margin-top: 40px;
}
</style>
